<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css">
</head>

<body>
<div id="app">

    <el-container style="height: 100%; border: 1px solid #eee">
        <el-header style="font-size: 28px; background: #F0F8FF">
            <div style="margin-top: 10px; margin-left: 32px;">API</div>
        </el-header>

        <el-container>
            <el-aside width="15%">
                <el-menu :unique-opened="true" @select="select">

                    <el-submenu v-for="(c_list, m) in menu" :key="m" :index="m">
                        <template slot="title">
                            <i class="el-icon-paperclip"></i>
                            <span>{{m}}</span>
                        </template>

                        <el-menu-item v-for="(c, k) in c_list" :key="k" :index="k.toString()">
                            <span>{{c}}</span>
                        </el-menu-item>
                    </el-submenu>

                </el-menu>
            </el-aside>

            <el-main>
                <el-breadcrumb separator="/" style="margin-bottom: 20px;">
                    <el-breadcrumb-item v-for="v in breadcrumb">{{v}}</el-breadcrumb-item>
                </el-breadcrumb>

                <el-collapse v-model="activeNames" accordion @change="change">
                    <el-collapse-item
                            v-for="(v, k) in funs"
                            :title="v.name.substr(0, v.name.length-6) + '  (' + fun_name_map[v.name] + ')'"
                            :name="k.toString()">

                        <div v-for="pro in v.props">

                            <el-row v-if="'param' == pro[0]" style="margin-top: 5px;">
                                <el-col :span="4" style="margin-top: 5px;">
                                    <span>
                                        <span v-if="'*' == pro[1].substr(0, 1)">
                                            <span style="color: red">*</span>{{pro[1].substr(1)}}
                                        </span>
                                        <span v-else>{{pro[1]}}</span>
                                    </span>
                                    <span v-if="pro['note']"> ({{pro['note']}})</span>
                                </el-col>

                                <el-col :span="4" :offset="4">
                                    <el-input :placeholder="pro['note']" :name="pro['note']" v-model="input[pro[1]]"
                                              clearable></el-input>
                                </el-col>
                            </el-row>

                            <el-row v-if="'search' == pro[0]" style="margin-top: 5px;">
                                <el-col :span="4" style="margin-top: 5px;">
                                    <span>(搜索)
                                        <span v-if="'*' == pro[1].substr(0, 1)">
                                            <span style="color: red">*</span>{{pro[1].substr(1)}}
                                        </span>
                                        <span v-else>{{pro[1]}}</span>
                                    </span>
                                    <span v-if="pro['note']"> ({{pro['note']}})</span>
                                </el-col>

                                <el-col :span="4" :offset="4">
                                    <el-input :placeholder="pro['note']" :name="pro['note']" v-model="input[pro[1]]"
                                              clearable></el-input>
                                </el-col>
                            </el-row>

                        </div>

                        <el-row>
                            <el-col :span="4" :offset="8">
                                <el-radio v-model="radio" label="get" size="mini">GET</el-radio>
                                <el-radio v-model="radio" label="post" size="mini">POST</el-radio>
                                <el-button @click="api(v.name)" size="mini" style="margin-top: 10px;">提交</el-button>
                                <el-button @click="browser(v.name)" size="mini" style="margin-top: 10px;">浏览器</el-button>
                            </el-col>
                        </el-row>

                        <el-input style="margin-top: 10px;"
                                  type="textarea"
                                  :autosize="{ minRows: 2, maxRows: 30}"
                                  placeholder="接口返回数据"
                                  v-model="input_res">
                        </el-input>

                    </el-collapse-item>

                </el-collapse>
            </el-main>

        </el-container>
    </el-container>

</div>
</body>

<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<!-- import Axios -->
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                menu: {},
                breadcrumb: [],
                funs: [],
                fun_name_map: {},
                activeNames: null,
                radio: 'post',
                m_c: '/module/api/',
                input: [],
                input_res: null,
            }
        },
        mounted() {
            const that = this;
            let url = this.m_c + 'getmc';
            axios.get(url)
                .then(function (response) {
                    data = response.data;
                    if (data.code != 1) {
                        return;
                    }

                    that.menu = data.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        methods: {
            browser(a) {
                let url = '/' + this.breadcrumb[0] + '/' + this.breadcrumb[1] + '/' + a.substr(0, a.length - 6);

                let p = '?';
                for (idx in this.input) {
                    if ('*' == idx.substr(0, 1)) {
                        p = p + idx.substr(1) + '=' + this.input[idx] + '&';
                    } else {
                        p = p + idx + '=' + this.input[idx] + '&';
                    }
                }

                window.open(url + p, '_blank');
            },
            api(a) {
                let url = '/' + this.breadcrumb[0] + '/' + this.breadcrumb[1] + '/' + a.substr(0, a.length - 6);
                let p = new FormData();
                let p1 = {};

                for (idx in this.input) {
                    if ('*' == idx.substr(0, 1)) {
                        p.append(idx.substr(1), this.input[idx]);
                        p1[idx.substr(1)] = this.input[idx];
                    } else {
                        p.append(idx, this.input[idx]);
                        p1[idx] = this.input[idx];
                    }
                }

                const that = this;
                if ('get' == that.radio) {
                    axios.get(url, {params: p1})
                        .then(function (response) {
                            that.input_res = JSON.stringify(response.data, undefined, 2);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                } else {
                    axios.post(url, p)
                        .then(function (response) {
                            that.input_res = JSON.stringify(response.data, undefined, 2);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }

            },
            select(idx, keyPath) {

                m = keyPath[0];
                c = this.menu[m][idx];

                this.breadcrumb = [];
                this.breadcrumb.push(m);
                this.breadcrumb.push(c);

                this.activeNames = null;
                const that = this;

                let url = this.m_c + 'geta';
                axios.get(url, {
                    params: {
                        module: m,
                        controller: c,
                    }
                })
                    .then(function (response) {
                        data = response.data;
                        if (data.code != 1) {
                            return;
                        }

                        that.funs = data.data.functions;

                        let obj = {};
                        for (idx in that.funs) {
                            let name = that.funs[idx]['name'];
                            for (p_idx in that.funs[idx]['props']) {
                                if ('title' == that.funs[idx]['props'][p_idx][0]) {
                                    obj[name] = that.funs[idx]['props'][p_idx]['note'];
                                }
                            }
                        }

                        that.fun_name_map = obj;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            change(val) {
                this.activeNames = val;
                this.radio = 'post';
                this.input = [];
                this.input_res = null;
            }
        }
    })
</script>
</html>